<template>
	<view class="x-image" :style="style">
		<image v-if="src" :src="url" :mode="mode" :style="style"></image>
		<view v-else class="placeholder"></view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
	src?: string;
	mode?: string;
	width?: string;
	height?: string;
	prefix?: boolean;
	radius?: number;
}

const props = withDefaults(defineProps<Props>(), {
	width: '100%',
	prefix: false
});

const url = computed(() => {
	if (props.prefix) {
		return `https://static.xiaolanlk.com/dlk-mobile${props.src}`;
	}
	return props.src;
});

const style = computed(() => {
	const map: any = {};
	if (props.width) {
		map.width = props.width;
	}
	if (props.height) {
		map.height = props.height;
	}
	if (props.radius) {
		map.borderRadius = props.radius + 'rpx';
	}
	return map;
});
</script>

<style lang="scss" scoped>
.x-image {
	display: flex;
	overflow: hidden;

	.placeholder {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
	}
}
</style>